gfimage.js ➔ ... ➔ this.init   A
last analyzed

Complexity

Conditions 1
Paths 1

Size

Total Lines 4

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
dl 0
loc 4
rs 10
c 1
b 0
f 0
cc 1
nc 1
nop 0
1
import progressbar from 'progressbar.js';
2
3
var GFImage = function() {
4
5
	var $ = jQuery;
6
7
	var gFImage = this;
8
9
	var element = $('#generate_fimage_wrapper');
10
11
	var postNoFImageIds = element.data('post_no_fimage_ids');
12
13
	var totalPostNoFImage = postNoFImageIds.length;
14
15
	var securityToken = element.data('nonce');
16
17
	var informationWrapper = $('.generate-fimage-information');
0 ignored issues
show
Unused Code introduced by
The variable informationWrapper seems to be never used. Consider removing it.
Loading history...
18
19
	var resultWrapper = $('.generate-fimage-result');
20
21
	var progressBarID = '#generate_fimage_progressbar';
22
23
	var progressBar;
24
25
	var generateButton = $('#generate_fimage_button');
26
27
	var saveButton = $('#save_form_button');
28
29
	this.init = function() {
30
		gFImage._progressBarInit();
31
		gFImage._onClickGButton();
32
	}	
33
34
	/**
35
	 * Initialize progress bar.
36
	 */
37
	this._progressBarInit = function() {
38
		var ProgressBar = require('progressbar.js');
39
		progressBar = new ProgressBar.Line(progressBarID, {
40
	        easing: 'easeInOut'
41
	    });
42
	}
43
44
	/** 
45
	 * Actions after generate button is clicked.
46
	 */
47
	this._onClickGButton = function() {
48
		generateButton.click(function(event){
49
			event.preventDefault();
50
			var warningResult = gFImage._warning();
51
			if(warningResult) {
52
				gFImage._toggleButton([generateButton, saveButton], 'disable');
53
				gFImage._ajaxUpdateFImage(postNoFImageIds[0]);
54
			}
55
		});
56
	}
57
58
	/**
59
	 * Enable, disable a list of buttons.
60
	 */
61
	this._toggleButton = function(arrayElement, status) {
62
		arrayElement.forEach(function(el){
63
			switch(status) {
64
				case 'disable':
65
					el.prop('disabled', true);
66
					break;
67
				case 'enable':
68
					el.prop('disabled', false);
69
					break;
70
				default:
71
					el.prop('disabled', false);
72
			}
73
		});
74
	}
75
76
	/**
77
	 * Regenerate feature image for a post.
78
	 */
79
	this._ajaxUpdateFImage = function(postId) {
80
		$.ajax({
81
            url: '/wp-admin/admin-ajax.php?action=wpdfi_generate_feature_image',
82
            method: 'POST',
83
            data: {
84
                post_id: postId,
85
                security: securityToken
86
            },
87
            success: function(res) {
88
89
            	var response = JSON.parse(res);
90
            	gFImage._updateLogAfterAjax(response);
91
            	var arrayIndex = postNoFImageIds.indexOf(postId);
92
            	gFImage._updateProgressBar(arrayIndex);
93
            	gFImage._continueAjax(arrayIndex);
94
95
            }
96
        })
97
	}
98
99
	/**
100
	 * Update the progress bar. Progress bar will be 100% if all the posts are regenerated feature image.
101
	 */
102
	this._updateProgressBar = function(arrayIndex) {
103
		/* Javascript array index start at 0, so we need to plus 1 to get the correct value for divide purpose. */
104
		var realIndex = arrayIndex + 1;
105
		var currentPercent = realIndex/totalPostNoFImage;
106
		var currentPercentText = (currentPercent*100).toFixed(2) + '%';
107
		progressBar.set(currentPercent);
108
		progressBar.setText(currentPercentText);
109
	}
110
111
	/**
112
	 * Check if there is a post which is not regenerated feature image yet.
113
	 */
114
	this._continueAjax = function(arrayIndex) {
115
		/* Javascript array index start at 0, so we need to minus 1 from total posts to get the last index. */
116
		var lastIndex = totalPostNoFImage - 1;
117
		var isLastIndex = (arrayIndex == lastIndex);
118
		/* If the current index is not the last index, continue run Ajax request on the next index. */
119
		if(!isLastIndex) {
120
			gFImage._ajaxUpdateFImage(postNoFImageIds[arrayIndex + 1]);
121
		/* If the current index is the last index, enable save button. */
122
		} else {
123
124
			gFImage._updateLogAfterAjax({
125
				status: 'complete',
126
				text: 'Complete!'
127
			});
128
			gFImage._toggleButton([saveButton], 'enable');
129
130
		}
131
	}
132
133
	/**
134
	 * Update log message after the generate button is clicked.
135
	 */
136
	this._updateLogAfterAjax = function(response) {
137
		switch(response.status) {
138
    		case true:
139
    			resultWrapper.prepend('<p>' + response.namePT + ' with ID ' + response.postId +' is updated feature image successfully</p>');
140
    			break;
141
    		case false:
142
    			resultWrapper.prepend('<p>' + response.namePT + ' with ID ' + response.postId +' because conditions are not match.</p>');
143
    			break;
144
    		case 'complete':
145
    			resultWrapper.append('<p>' + response.text + '</p>');
146
    			break;
147
    		default:
148
    			resultWrapper.prepend('<p>' + response.namePT + ' with ID ' + response.postId +' has something wrong!</p>');
149
    	}
150
	}
151
152
	/**
153
	 * Display alert box whenever the generate button is clicked.
154
	 */
155
	this._warning = function() {
156
		var warningText = 'Are you sure you want to generate all feature image with the values in the "DFIs" tab? Make sure to backup your database before click "OK".';
157
		return confirm(warningText);
158
	}
159
160
}
161
162
export default GFImage;